<script setup>
import DetailHot from './compoents/DetailHot.vue'
import { useRoute } from 'vue-router'
import { getDetailsSerivec } from '@/api/detail'
import { onMounted, ref } from 'vue'
import { useCartStore } from '@/stores/car'
const storeCar = useCartStore()
const route = useRoute()

defineOptions({ name: 'indexItem' })
// 获取商品详情
const detailData = ref({})

//  大图数组列表
const BigList = ref([])
const getDetails = async () => {
  const res = await getDetailsSerivec(route.params.id)
  //  console.log(res);
  detailData.value = res.data.result
  BigList.value = res.data.result.mainPictures
}
onMounted(() => {
  getDetails()
})
//SKU规格被操作时
const skuList = ref({})
const XtxChange = (sku) => {
  skuList.value = sku
}

// 购物车
const count = ref(1)
const handleChange = (count) => {
  console.log(count)
}
const buyCar = () => {
  if (skuList.value.skuId) {
    storeCar.addCart({
      id: detailData.value.id,
      name: detailData.value.name,
      picture: detailData.value.mainPictures[0],
      price: detailData.value.price,
      count: count.value,
      skuId: skuList.value.skuId,
      attrsText: skuList.value.specsText,
      selected: true
    })
  } else {
    ElMessage({
      message: '请选择规格',
      type: 'warning'
    })
  }
}
</script>
<template>
  <!-- 商品详情页面包屑导航 -->
  <div class="bread mbx" style="width: 1200px; margin: 10px auto">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: `/category/${detailData.categories?.[1].id}` }">{{
        detailData.categories?.[1].name
      }}</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: `category/sub/${detailData.categories?.[0].id}}` }">{{
        detailData.categories?.[0].name
      }}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <!-- 销量人气 -->
  <div class="zuiwaiceng">
    <div class="container">
      <!-- 图片部分 -->
      <XtxImageView :BigList="BigList"></XtxImageView>

      <!-- 底部 -->
      <div class="footer">
        <ul>
          <li>
            <p class="title">销量人气</p>
            <span class="price">{{ detailData.salesCount }}+</span>
            <p>销量人气</p>
          </li>
          <li>
            <p class="title">商品评价</p>
            <span class="price">{{ detailData.commentCount }}+</span>
            <p>销量人气</p>
          </li>
          <li>
            <p class="title">收藏人气</p>
            <span class="price">{{ detailData.collectCount }}+</span>
            <p>销量人气</p>
          </li>
          <li>
            <p class="title">品牌信息</p>
            <span class="price">{{ detailData.brand?.name }}</span>
            <p>销量人气</p>
          </li>
        </ul>
      </div>

      <!-- 商品具体信息 -->
      <div class="basic">
        <h1 style="margin-bottom: 20px; font-weight: 400">{{ detailData.name }}</h1>
        <span>{{ detailData.desc }}</span>
        <div
          class="price"
          style="margin-top: 10px; width: 130px; display: flex; justify-content: space-between"
        >
          <span class="new" style="font-size: 18px; color: red">￥{{ detailData.price }}</span>
          <span class="shuxian"> | </span>
          <span class="old" style="text-decoration: line-through; line-height: 24px; color: #999">{{
            detailData.oldPrice
          }}</span>
        </div>
        <div class="cuxiao" style="margin: 10px 0">
          <p>促销：12月好物放送，App领卷购买，直降120元</p>
          <p>
            服务：无忧退货，快速退款，免费包邮，<a href="#" style="color: lightgreen">了解详情</a>
          </p>
        </div>
        <!-- 小兔先 SKU 部分-->
        <XtxSku :goods="detailData" @change="XtxChange"></XtxSku>

        <!-- 数字改变区域 -->
        <el-input-number
          v-model="count"
          :min="1"
          :max="10"
          @change="handleChange"
          style="margin-right: 50px"
        />
        <!-- 添加购物车按钮 -->
        <button
          class="addCar"
          style="
            border: 0;
            margin-top: 10px;
            border-radius: 5px;
            cursor: pointer;
            width: 100px;
            height: 30px;
            background-color: #67c23a; color: #fff;" @click="buyCar">加入购物车</button>
      </div>
    </div>
  </div>
  <!-- 商品详情 热榜-->
  <div class="titles">
    <div class="top">商品详情</div>
    <div class="xiamian">
      <div class="txt">
        <ul>
          <li v-for="item in detailData.details?.properties" :key="item?.value">
            <strong>{{ item?.name }}</strong
            >：{{ item?.value }}
          </li>
        </ul>
        <img
          v-for="(img, index) in detailData.details?.pictures"
          :key="index"
          :src="img"
          alt="null"
          width="100%"
          height="60%"
        />
      </div>
      <!-- 热榜区域 -->
      <div class="hot">
        <DetailHot :title="1"></DetailHot>
        <DetailHot :title="2"></DetailHot>
      </div>
    </div>
  </div>
</template>
<style scoped>
.zuiwaiceng {
  padding-top: 20px;
  margin: 0 auto;
  width: 1200px;
  background-color: #fff;
}
.container {
  width: 1160px;
  background-color: #fff;
  position: relative;
}

.footer {
  border-top: 1px solid #eee;
  width: 400px;
  height: 80px;
}
.footer ul {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
}
.footer ul .title {
  color: #999;
}
.footer ul .price {
  display: block;
  text-align: center;
  font-size: 12px;
  color: red;
}
.basic {
  position: absolute;
  right: 20px;
  top: -10px;
  width: 600px;
}
.titles {
  width: 1200px;
  background-color: #fff;
  margin: 20px auto 0;
}
.titles .top {
  font-size: 20px;
  line-height: 45px;
  border-bottom: 1px solid #ccc;
}
.xiamian {
  position: relative;
}
.xiamian .txt {
  padding: 0 20px;
  width: 950px;
}
.xiamian .txt ul {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}
.xiamian .txt ul li {
  line-height: 30px;
}
.hot {
  position: absolute;
  top: 0;
  right: 0;
  width: 250px;
}
.shuxian {
  color: #999;
  margin: 0 10px;
}
.cuxiao {
  display: flex;
  padding-left: 5px;
  border-radius: 10px;
  flex-direction: column;
  justify-content: space-around;
  background-color: #f3f3f3;
  /* border: 1px solid #000; */
  height: 70px;
}
</style>
